<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的基本使用</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        body {
            margin: 0;
        }

        /* 顶部整体的背景和高度 */
        .top_box {
            height: 70px;
            background: #242424;


        }

        .log {
            width: 200px;
            height: 100%;
            background: url(images/log.png);
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: 15px;
            float: left;

        }

        .munes {
            float: left;
        }

        ul {
            margin: 0;
        }

        ul li {
            list-style: none;
            padding: 0 19px;
            float: left;
            height: 70px;
            line-height: 70px;
            color: #fff;

        }

        ul li:hover {
            background: #444400;
            /* 设置鼠标的样式 */
            cursor: pointer;
        }

        .login {
            float: right;
        }

        .user {
            float: right;
        }

        .search {
            float: right;
        }
        /* 定位的使用 */
        .hot_box{
            position: relative;
        }
        .hot{
            background: red;
            position: absolute;
            top:21px;
            left: 100px;
            height: 16px;
            line-height: 16px;

        }
    </style>
</head>
<body>
<div id="app">
    <!--这个是我的第一个组件-->
    <musen-top></musen-top>
    <!--这个是我的第二个组件-->
    <musen-a></musen-a>
</div>

</body>
<script>
    const app = Vue.createApp({});

    //注册全局组件，在所有的地方都可以使用
    app.component('musen-a',{
        data(){
            return {name:'hello'}
        },
        template:`
        <h1>这个是组件start</h1>
        {{name}}
        <h1>这个是组件end</h1>
        `
    });

    app.component('musen-top',{
        template:`
					<div class="top_box">
						<!-- log -->
						<div class="log"></div>
						<!-- 菜单 -->
						<div class="munes">
							<ul>
								<li>发现音乐</li>
								<li>我的音乐</li>
								<li>关注</li>
								<li>商场</li>
								<li>音乐人</li>
								<li class="hot_box">
									<span>下载客户端</span>
									<span class="hot">hot</span>
								</li>
							</ul>
						</div>
						<!-- 登录按钮 -->
						<div class="login"></div>
						<!-- 创造中心 -->
						<div class="user"></div>
						<!-- 搜索框 -->
						<div class="search"></div>
					</div>
				`
    })

    app.mount('#app');
</script>
</html>